<template>
	<view>
		<!-- 排行榜分类 -->

		<!-- 排行榜详情 -->
		<view class="content">
			
			<view class="classiftTOP">
				<view class="" @click="toReturn()" style="position: absolute; top: 4vh; left: 3vw;">
					<image style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png"></image>
				</view>
				<view class="classiftTOPl">
					
					<view @click="classift(1)" :class="{'classiftBut' : gender == 1}" class="classiftTOPln ">男生</view>
					<view  @click="classift(2)" :class="{'classiftBut' : gender == 2}" class="classiftTOPlv">女生</view>
				</view>
			</view>
			<view class="classiftBtt" id="asa">
				<!-- 左侧 -->
				<view class="classiftBttL">
					<view class="classiftBttLtit" v-for="(topical, index) in datalist" :key="index"
					 @click="toSwitch(index)"	:class="{ classiftBttLtitO: index == active}">
						{{ topical.name }}
					</view>
				</view>
				<view class="classiftBttR">
					<view class="" style="margin-top: 20rpx;" v-for="(item ,index) in datalist[active].books">
						<view class="" style="display: flex; align-items: center;" @click="todetails(item)">
							 <img style=" width: 40rpx; height: 40rpx;" :src="getMedalImage(index)" >
			
							<image style="margin-left: 15rpx; width: 50px; height: 50px;"
								:src="`${yourBaseURL}${item.mian_image}`"></image>
							<view class="" style="margin-left: 10rpx;">
								<p style="font-weight: 600;">{{item.title}}</p>
								<p>作者：{{item.lead}}</p>
							</view>

						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyHot
	} from '@/http/api.js';
	import allCategories from '@/assets/json/classify/allCategories.json';
	export default {
		data() {
			return {
				gender:1,
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				active:0,	
				srca: require('static/images/home/search.png'),
				allCategories: allCategories,
				datalist:[]
			};
		},
		onLoad() {
			this.MyHot()
		},
		onReady() {
			this.$nextTick(function() {});
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
	
				query.select('#asa').boundingClientRect(data => {
						console.log(data);
					})
					.exec();
			}, 1000);
		},
		methods: {
			// 返回上一页
			toReturn() {
				uni.navigateBack();
			},
			// 排名图片
			getMedalImage(index) {
				if (index === 0) {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/7efcefdb0c719fc75011c5bd599c3662.png'; // 第一名显示皇冠
				} else if (index === 1) {
					return  'http://hyxs.ychlkj.cn/uploads/20231027/87ba1364f87e24fe87f46ea171a4e5a9.png '; ; // 第二名显示金色
				} else if (index === 2) {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/98d85dadcad8f59c06cc68f9707e1cc4.png'; // 第三名显示银色
				} else {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/ebb0b80faef41af7e9bdb1b470c3cfca.png'; // 第三名之后不显示任何标识
				}
			},
			toSwitch(index){
			this.active	 = index
			},
			MyHot(){
				let data = {
					"like":this.gender
				}
				getMyHot(data).then((res)=>{
					this.datalist = res[1].data.data
					console.log(res[1].data.data,"排行榜2");
				})
			},
			// 切换性别
			classift(e) {
				this.gender = e
			     this.MyHot()
				console.log(e,"性别");
			},
			// 跳转详情 
			todetails(item){
				console.log(item,"[][[]]");
				uni.navigateTo({
					url: '/pages/books/details/details?id='+item.id,
				});
			},
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.productTitle')
					.boundingClientRect()
					.exec(res => {
						console.log(res);
						let nodes = res[0];
						let arr = [];
						nodes.map(item => {
							arr.push(item.top);
						});
						this.topList = arr;
						console.log(this.topList);
					});
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
		}
	};
</script>>

<style lang="scss">
	.content {
width: 100%;
		position: relative;
		background-color: #fafafa;
	}

	.classiftTOP {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		 width: 100vw;
		 // height: 45vw;
		box-sizing: border-box;
		// width: 100%;
		 height: 390rpx;
		background-size: 100% 100%;
		background-image: url('../../../static/images/home/baihangbang.png');
		background-repeat: no-repeat;
		// background-color: #fafafa;
		padding-bottom: 5vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.classiftTOPl {
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			width: 30vw;
			font-size: 14px;
			color: #999999;
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);

			.classiftTOPln {
				margin-left: 5vw;
			}

			.classiftBut {
				font-size: 40rpx;
				color: #000000;
				font-weight: 550;
			}
		}

		.classiftTOPr {
			width: 20px;
			height: 20px;
			margin-right: 5vw;

			.classiftTOPri {
				width: 20px;
				height: 20px;
			}
		}
	}

	.classiftBtt {
		display: flex;
		justify-content: space-between;
		background-color: #fafafa;
		font-size: 14px;
		padding-top: 53vw;
		// margin-top: 37vw;

		.classiftBttL {
			width: 20vw;
			text-align: center;
			font-size: 14px;
			margin-top: 0vw;
			position: fixed;
			top: 55vw;
			left: 0;

			.classiftBttLtit {
				margin-bottom: 4vw;
				font-size: 13px;
				color: #131313;
				border-left: 4px solid #fafafa;
			}

			.classiftBttLtitO {
				color: #e66f3b;
				border-left: 4px solid #e66f3b;
			}
		}

		.classiftBttR {
			width: 80vw;
			background-color: #ffffff;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 2vw 1vw;
			margin-left: 19vw;
		}
	}
</style>